<template>
  <div class="floor-wrapper" :class="{'bg':showBg}" :style="{'background-image':showBg?bg:''}">
    <div class="floor-content">
      <topic-header :name="name" :en-name="enName"></topic-header>
      <div class="floor-content-item" v-for="(item,index) in data" :key="index">
        <div class="floor-banner" :class="{'noBg':!item.dissemImg}" @click="toList(item)"
             :style="{'background-image':item.dissemImg?'url('+item.dissemImg+')':'','background-size':'contain'}">
          <div class="floor-banner-wrapper" v-if="item.imgShowDesc">
            <div class="banner-name">
              {{ item.dissemTitle }}
            </div>
            <div class="banner-desc">
              {{ item.dissemDesc }}
            </div>
          </div>
          <!-- <div class="banner-btn">
            <div @click="toList(item)">查看更多</div>
          </div> -->
        </div>
        <div class="floor-item-wrapper">
          <div class="floor-item" v-for="(floor,floorIndex) in item.portalFloorGoodsCustVOList.slice(-6)" :key="floor.goodsId">
            <div>
              <div class="floor-item-content-wrapper">
                <div class="floor-item-content">
                  <img :src="floor.thumbnail" alt=""/>
                  <div class="floor-item-content-right">
                    <div class="issjrz" v-if="floor.authOrganFullName == '深圳数据交易所' && floor.isShowFlag">
                      <a-tooltip :title="'经' + floor.authOrganFullName + '合规评估'">
                        <img src="../../../assets/z.png"/>
                      </a-tooltip>
                    </div>
                    <div class="floor-item-name more-t" :style="{color: floor.isPublic || '#aaa'}" @click="toDetail(floor.goodsId)">
                      {{ floor.goodsName }}
                    </div>
                    <div class="floor-item-supplier" v-if="floor.supplierName">
                      {{ floor.supplierName }}
                    </div>
                  </div>
                </div>
                <div class="floor-item-content-bottom">
                  <div class="itemprice" :class="{itemflex: floor.chargeType == 3}" v-if="floor.activityDesc">
                    <span style="line-height: 20px;">{{floor.activityDesc}}</span>
                    <!-- <span class="unit">{{ floor.chargeType === 1 ? floor.unit : '' }}</span> -->
                    <div class="through" >
                      {{ floor.chargeType == 3 ? '面议' : ('¥' + (floor.chargeType == 1 ? floor.price : 0)) }}
                      {{ floor.chargeType === 1 ? floor.unit : '' }}
                    </div>
                  </div>
                  <div class="floor-item-price" style="line-height: 20px;" v-else>
                    {{floor.chargeType == 3 ? '面议' : ('¥' + (floor.chargeType == 1 ? floor.price : 0))}}
                    <span class="floor-item-unit" v-if="floor.chargeType === 1">{{ floor.unit }}</span>
                  </div>
                  <rate-star :rate="floor.goodsRate" show-bg></rate-star>
                </div>
                <!-- <div style="color: #aaa; font-size: 10px;"  v-if="floor.authOrganFullName && floor.authOrganFullName != '深圳数据交易所'">{{floor.authOrganFullName}}认证</div> -->
              </div>
              <div class="floor-item-desc more-t">
                {{ floor.goodsDesc }}
              </div>
            </div>
            <div class="floor-item-bottom">
              <div class="floor-item-type">
                <svg-icon icon-class="data_type" size="14" style="margin-right: 3px;"></svg-icon>
                行业：
                <span class="floor-item-type-content">{{ floor.applicationIndustry }}</span>
              </div>
              <div class="floor-item-type">
                <svg-icon icon-class="data_scene" size="14" style="margin-right: 3px;"></svg-icon>
                场景：
                <span class="floor-item-type-content">{{ floor.applicationScenario }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopicHeader from './TopicHeader'
import RateStar from '../../../components/RateStar'

export default {
  name: 'Floor',
  components: {RateStar, TopicHeader},
  props: {
    name: '',
    enName: '',
    data: {
      type: Array,
      default: () => []
    },
    showBg: false
  },
  data () {
    return {
      bg: 'url(' + require('../../../assets/images/portal/floor_bg.png') + ')'
    }
  },
  methods: {
    toDetail (id) {
      this.$emit('detail', id)
    },
    toList ({goodsCatalogs,dissemImgJumpUrl}) {
      this.$emit('list', goodsCatalogs,dissemImgJumpUrl)
    }
  }
}
</script>

<style scoped lang="scss">
$mainColor: #3370FF;
.floor-wrapper {
  background: white;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 20px;

  &.bg {
    background-size: cover;
  }
}

.floor-content {
  width: 1200px;
  margin: auto;
}

.floor-content-item {
  display: flex;
  height: 520px;
  margin-bottom: 20px;

  .floor-banner {
    cursor: pointer;
    width: 240px;
    margin-top: 20px;
    height: 500px;
    position: relative;

    &.noBg {
      background: #52A4FF;
    }

    .floor-banner-wrapper {
      position: absolute;
      top: 50%;
      bottom: 92px;
      left: 20px;
      right: 20px;
      text-align: center;

      .banner-name {
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 20px;
      }

      .banner-desc {
        margin-top: 20px;
        text-align: center;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 18px;
      }
    }

    .banner-btn {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 60px;

      div {
        width: fit-content;
        margin: auto;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
        border: 1px solid #FFFFFF;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 30px;
        padding: 0 26px;

        &:hover {
          background: rgba(255, 255, 255, 0.3);
        }
      }
    }
  }

  .floor-item-wrapper {
    flex: 1;
    display: flex;
    flex-wrap: wrap;

    .floor-item {
      margin-left: 20px;
      margin-top: 20px;
      width: calc((100% - 60px) / 3);
      height: 240px;
      padding: 20px;
      background: #FFFFFF;
      border-radius: 10px;
      border: 1px solid #E2E2E2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform .1s;

      &:hover {
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 0 10px 0 rgba(#0078FE, 0.1);
      }

      .floor-item-content-wrapper {
        border-bottom: 1px dotted #E2E2E2;
        padding-bottom: 12px;
        margin-bottom: 12px;

        .floor-item-content {
          display: flex;
          align-items: center;

          img {
            width: 70px;
            height: 70px;
          }

          .floor-item-content-right {
            flex: 1;
            width: 0;
            margin-left: 16px;
            height: 70px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            .issjrz{
              position: absolute;
              top: -4px;
              right: -4px;
              img{
                height: 24px;
                width: 24px;
              }
            }
            .floor-item-name {
              font-size: 14px;
              cursor: pointer;
              width: 88%;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              line-height: 20px;
              font-family: PingFangSC-Medium, PingFang SC, sans-serif;
              font-weight: 500;
              color: #323232;

              &:hover {
                color: $mainColor;
              }
            }

            .floor-item-supplier {
              font-size: 12px;
              line-height: 12px;
              font-family: PingFangSC-Regular, PingFang SC, sans-serif;
              color: $mainColor;
              padding: 5px 10px;
              border-radius: 2px;
              border: 1px solid #CCE4FE;
              width: fit-content;
              max-width: 100%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }

        .floor-item-content-bottom {
          margin-top: 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .through{
            text-decoration: line-through;
            color: #999;
            font-size: 12px;
            margin-left: 4px;

          }
          .itemflex{
            white-space:nowrap;
            display: flex;
            align-items: self-end;
          }
          .itemprice{
            font-size: 20px;
            color: #E03437;
            font-weight: 500;
            
            .unit{
              font-size: 12px;
              font-weight: 400;
              color: #909090;
              margin-left: 6px;
            }
          }
          .floor-item-price {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC, sans-serif;
            font-weight: 500;
            color: #E03437;
            display: flex;
            align-items: flex-end;

            .floor-item-unit {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC, sans-serif;
              font-weight: 400;
              color: #909090;
              margin-left: 5px;
            }
          }
        }
      }

      .floor-item-desc {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #646464;
        line-height: 18px;
      }

      .floor-item-bottom {
        display: flex;
        align-items: flex-start;

        .floor-item-type {
          flex: 1;
          width: 0;
          display: flex;
          align-items: flex-start;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #646464;
          line-height: 14px;

          &:last-child {
            margin-left: 5px;
          }

          .floor-item-type-content {
            color: #323232;
            flex: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
